<%--
  Created by IntelliJ IDEA.
  User: Lemon
  Date: 2020/6/11
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的服务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="serviceTable" lay-filter="serviceTable"></table>

<script type="text/html" id="serviceToolBar">
    <div class="layui-btn-container">
        <button class="layui-btn"  lay-event="select"><i class="layui-icon">&#xe615;</i>搜素</button>
        <button class="layui-btn" lay-event="add"><i class="layui-icon">&#xe654;</i>新建</button>
        <button class="layui-btn layui-btn-normal" lay-event="update"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-normal" lay-event="handleService"><i class="layui-icon">&#xe642;</i>处理服务</button>
        <button class="layui-btn layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-warm" lay-event="deliver"><i class="layui-icon">&#xe674;</i>转交</button>
    </div>
</script>
<%--<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>--%>


<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['layer','table','jquery'], function(){
        var layer = layui.layer//layer 弹窗对象
        var table=layui.table;
        var $=layui.$;//引入jquery

        table.render({
            elem: '#serviceTable'
            ,url:'${pageContext.request.contentType}/service/list'
            ,method:'post'
            ,toolbar: '#serviceToolBar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '服务表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'create_date', title:'服务时间', width:160, fixed: 'left', sort: true, event:'showServiceDetail',style: 'cursor:pointer;color: #1E9FFF'}
                ,{field:'customer_id', title:'客户名称', width:100, event:'showCustomerDetail',style: 'cursor:pointer;color: #1E9FFF'
                    ,templet: function(res){
                        return '<span>'+ res.customer_name +'</span>';
                    }}
                ,{field:'type', title:'服务类型', width:120}
                ,{field:'general', title:'服务概要', width:160}
                ,{field:'creater_name', title:'创建人', width:100,event:'showUserDetail',style: 'cursor:pointer;color: #1E9FFF'}
                ,{field:'emergency', title:'紧急程度', width:100,templet: function (data) {
                        if(data.emergency == '非常紧急'){
                            return "<span style='color:red;'>" + data.emergency + "</span>";
                        }else if(data.emergency == '紧急'){
                            return "<span style='color:blue;'>" + data.emergency + "</span>";
                        }else{
                            return data.emergency;
                        }
                    }}
                ,{field:'status', title:'处理状态', width:120,templet : function(data){
                        if(data.status == '未处理'){
                            return "<span style='color:red;'>" + data.status + "</span>";
                        }else if(data.status == '已归档'){
                            return "<span style='color:#999999;'>" + data.status + "</span>";
                        }else if(data.status== '处理中'){
                            return "<span style='color:blue;'>" + data.status + "</span>";
                        }else if(data.status== '已处理'){
                            return "<span style='color:blue;'>" + data.status + "</span>";
                        }else{
                            return "<span style='color:red;'>" + '未处理' + "</span>";
                        }
                    }}
            ]]
            ,page: true
        });

        table.on('toolbar(serviceTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);//获取到选中的内容
            switch(obj.event){//工具栏中按钮的lay-event属性的值
                case 'select':
                    //弹出层
                    layer.open({
                        title:"搜索",//标题
                        type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/service/toSelect",
                        area: ['900px', '500px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'add':
                    //弹出层
                    layer.open({
                        title:"添加服务",//标题
                        type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/service/toAdd",
                        area: ['900px', '500px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'update':
                    console.log(checkStatus)
                    console.log(checkStatus.data)//选中的数据
                    if (checkStatus.data.length==0){
                        layer.msg("请选择要修改的服务！")
                        return;
                    }else if (checkStatus.data.length>1){
                        layer.msg("同时只能修改一条服务，请只选择一个！")
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值，并放入数组
                    for (var i = 0; i < data.length; i++) {
                        idArray.push(data[i].id);
                    }
                    layer.open({
                        title:"修改服务",//标题
                        type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/service/toUpdate?id="+idArray,
                        area: ['900px', '500px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'handleService':
                    console.log(checkStatus)
                    console.log(checkStatus.data)//选中的数据
                    if (checkStatus.data.length==0){
                        layer.msg("请选择要处理的服务！")
                        return;
                    }else if (checkStatus.data.length>1){
                        layer.msg("同时只能处理一条服务，请只选择一个！")
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值，并放入数组
                    for (var i = 0; i < data.length; i++) {
                        idArray.push(data[i].id);
                    }
                    layer.open({
                        title:"处理服务",//标题
                        type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/service/toHandleService?id="+idArray,
                        area: ['1000px', '600px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'delete':
                    if (checkStatus.data.length==0){//选中的数据
                        layer.msg("请选择要删除的记录！")
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值，并放入数组
                    for (var i = 0; i < data.length; i++) {
                        idArray.push(data[i].id);
                    }
                    //执行批量删除
                    layer.confirm("确定要删除"+data.length+"条记录吗？",function () {
                        $.post("${pageContext.request.contextPath}/service/batchDelete",
                            {ids:idArray.join(",")},function (result) {
                                if (result.code==0){
                                    layer.alert("删除成功")
                                    //重新加载表格
                                    table.reload("serviceTable",{
                                        page:{
                                            curr:1
                                        }
                                    })
                                    return "";
                                }
                                layer.alert("删除失败");
                            },"json");
                    });
                    break;
                case 'deliver':
                    if(checkStatus.data.length < 1){
                        layer.msg("请选择要转交的记录！");
                    }else if(checkStatus.data.length > 1){
                        layer.msg("同时只能转交一条服务，请只选择一个！");
                    }else if(checkStatus.data[0].status == '已归档'){
                        layer.msg("已归档的服务不能转交！");
                    }else {
                        console.log(checkStatus.data[0].id)
                        //弹出层
                        layer.open({
                            title:"转交",//标题
                            type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                            content:"${pageContext.request.contextPath}/service/toDeliver?id="+checkStatus.data[0].id,
                            area: ['800px', '500px'],//定义宽高
                            maxmin:true//可以最大化
                        })
                    }

                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        table.on('tool(serviceTable)',function (obj) {
            var data=obj.data;
            if (obj.event == 'showServiceDetail'){
                console.log(data.id)
                console.log(data.handler)
                console.log(data.customer_id)
                layer.open({
                    title:"服务详情",//标题
                    type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                    content:"${pageContext.request.contextPath}/service/toDetail?id="+data.id,
                    area: ['800px', '500px'],//定义宽高
                    maxmin:true//可以最大化
                })
            }
            if (obj.event == 'showCustomerDetail'){
                console.log(data.id)
                layer.open({
                    title:"客户详情",//标题
                    type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                    content:"${pageContext.request.contextPath}/service/toCustomerDetail?id="+data.id,
                    area: ['800px', '500px'],//定义宽高
                    maxmin:true//可以最大化
                })
            }
            if (obj.event == 'showUserDetail'){
                console.log(data.creater)
                layer.open({
                    title:"用户信息",//标题
                    type:2,//2 为iframe层，可以加载其他的页面到弹出层中
                    content:"${pageContext.request.contextPath}/service/toUserDetail?id="+data.creater,
                    area: ['900px', '500px'],//定义宽高
                    maxmin:true//可以最大化
                })
            }
        })
    });
</script>

</body>
</html>